import React from "react";
import { useDispatch } from "react-redux";
import { changeActive, changeShow, deleteTodo, editTodo } from "../../store/actions/todoList";
import { TodoItem } from "../../types/data";
import "./index.css";
type Prop = {
  item: TodoItem;
};
export default function Item(props: Prop) {
  const { item } = props;
  const dispatch = useDispatch();
  const deleteTodoItem = () => {
    dispatch(deleteTodo(item.id));
  };
  const ChangeItem = () => {
    item.complete = !item.complete;
    dispatch(editTodo({ ...item, complete: item.complete }));
  };
  const checkTodo=()=>{
    dispatch(changeActive(item.id))
    dispatch(changeShow(false))
  }
  const changeTodo=()=>{
    dispatch(changeActive(item.id))
    dispatch(changeShow(true))
  }
  return (
    <div className="box">
      <div className="Item">
        <input
          type="checkbox"
          checked={item.complete ? true : false}
          onChange={ChangeItem}
        />
        <span style={item.complete ? { textDecoration: "line-through" } : {}}>
          {item.content.length > 8
            ? item.content.slice(0, 8) + "..."
            : item.content}
        </span>
        <span className="buttons">
          <button className="check" onClick={checkTodo}>查看</button>
          <button className="edit" onClick={changeTodo}>编辑</button>
          <button className="delete" onClick={deleteTodoItem}>
            删除
          </button>
        </span>
      </div>
      <div className="bottom"></div>
    </div>
  );
}
